<template>
<el-form ref="ruleFormRef" :rules="rules" :model="formLessonType" label-width="80px">
  <el-row>
    <el-col :span="12">
      <el-form-item label="类型名称" prop="typeName">
        <el-input v-model="formLessonType.typeName" placeholder="请输入课程类型名称"/>
      </el-form-item>
    </el-col>

   

  </el-row>
</el-form>

  <div class="dialog-button-wrap">
    <el-button @click="close">取消</el-button>
    <el-button @click="editLessonType(ruleFormRef)" :loading="subLoading" type="success" color="#083a6d">保存</el-button>
  </div>

</template>

<script setup lang="ts">
import {ref, reactive} from 'vue'
import {ElMessage,FormInstance,FormRules} from 'element-plus'
import {editLessonTypeApi} from "@/api/edu/lessontype/lessonType"
// 表单实例对象
const ruleFormRef = ref<FormInstance>()
// 表单约束规则
const rules = reactive<FormRules>({
  typeName: [{ required: true,message: '课程类型名称不能为空',trigger: 'blur' }]
  // typeSort: [{ required: true,message: '课程类型排序不能为空',trigger: 'blur' }]
})
// 定义事件
const emit = defineEmits(['closeEditLessonTypeForm','success'])
// 按钮状态
const subLoading = ref(false)
// 表单数据对象
const formLessonType = reactive({
  id: 0,
  typeName: '',
  // typeSort: 0,
  // remarks: ''
})

// 获取父组件传过来的lessonTypeInfo对象
const props = defineProps(['lessonTypeInfo'])
const lessonTypeInfo = ref(props.lessonTypeInfo)
// 给表单填充数据
for (const key in formLessonType) {
  formLessonType[key] = lessonTypeInfo.value[key]
}


// 更新课程类型信息
const editLessonType = async (formEl: FormInstance | undefined)=> {
  if(!formEl)return
  await formEl.validate(async (valid,fields)=>{
    subLoading.value = true
    if(valid){
      const { data } = await editLessonTypeApi(formLessonType)
      if(data.status === 200){
        ElMessage.success(data.message)
        emit('success')
      }else {
        ElMessage.error(data.message)
      }
    }else {
      ElMessage.error('提交失败，你还有未填写的项')
    }
  })
  subLoading.value = false
}
// 取消表单
const close = ()=> {
  emit('closeEditLessonTypeForm')
}

</script>

<style scoped>
.dialog-button-wrap {
  text-align: center;
  margin-top: 20px;
}
</style>
